<template>
  <view class="container">
    <statusBar></statusBar>
    <!-- 返回栏 -->
    <view class="go-back">
      <image src="../../static/go-back.svg" @click="goBack"/>
      <uni-easyinput 
        prefixIcon="search" 
        v-model="searchVal" 
        placeholder="最新话题" 
        @iconClick="onSearch"
      ></uni-easyinput>
    </view>

    <!-- 话题列表 -->
    <view class="topic-list">
      <view class="item" v-for="item in dataList.topList" :key="item.id" @click="goBack(item)">
        <text># {{item.content}}</text>
        <text>{{item.hot}}人讨论</text>
      </view>
    </view>

    <!-- 暂无数据 -->
    <view class="is-end" v-if="isEnd">没有更多了</view>
  </view>
</template>

<script setup>
	import { ref, watch, reactive, onMounted } from 'vue';  
  import { onLoad, onShow } from "@dcloudio/uni-app";	
  import { topicList } from '@/api/posting'

  const searchVal = ref('')
  const isEnd = ref(false)
  const dataList = reactive({
    topList:[]
  })
  const pageData = reactive({
		pageSize:10,
		page:1
	})

  onShow(() => {
    getTopicList()
  })

  const getTopicList = async () => {
    let datas = {
      ...pageData,
      searchCondition:searchVal.value
    }
    let res = await topicList(datas)
    console.log('话题分页',res)
    if(res.length < pageData.pageSize) isEnd.value = true
    dataList.topList = [...dataList.topList,...res]
  }

  const goBack = (item) => {
    let changeTopic = uni.getStorageSync('changeTopicList') || [];
    let isrepetition = changeTopic.filter(item2 => item2.id === item.id)
    if(isrepetition.length > 0) {
      uni.showToast({
        title: '请勿重复选择话题',
        duration: 2000,
        icon:'none'
      });
    }else{
      changeTopic.push(item)
      uni.setStorageSync('changeTopicList',changeTopic)
      uni.navigateBack({ delta: 1 })
    }
	}

  const onSearch = () => {
    pageData.page = 1
    dataList.topList = []
    getTopicList()
  }

</script>

<style lang="scss" scoped>
  .container{
    width: 100vw;
    height: 100vh;
    background-color: white;

    .go-back{
      width: 750rpx;
      height: 88rpx;
      padding:0 30rpx;
      box-sizing: border-box;
      background-color: white;
      border-bottom: 2rpx solid #F4F4F4; 
      @include flex(row,space-between,center);
      
      image{
        width: 40rpx;
        height: 40rpx;
        margin-right: 30rpx;
      }

      ::v-deep .uni-easyinput{
        width: 616rpx !important;
        height: 64rpx;
      }
      
      ::v-deep .uni-easyinput__content{
        width: 616rpx !important;
        height: 64rpx !important;
        background: #F4F3F7 !important;
        border-radius: 32rpx !important;
        backdrop-filter: blur(5px) !important;
      }
      ::v-deep .is-input-border{
        border: none !important;
      }
      ::v-deep .uni-easyinput__placeholder-class{
        font-weight: 500;
        font-size: 24rpx;
        color: #999999;
      }

      ::v-deep .uni-icons{
        color: #333333 !important;
        font-size: 20px !important;
      }

      text{
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #333333;
        margin-left: 30rpx;
      }
    }

    .topic-list{
      width: 690rpx;
      margin: auto;

      .item{
        width: 690rpx;
        height: 92rpx;
        border-bottom: 2rpx solid #F7F7F7;
        @include flex(row,space-between);

        >text:nth-of-type(1){
          font-weight: 400;
          font-size: 28rpx;
          color: #333333;
        }
        >text:nth-of-type(2){
          font-weight: 400;
          font-size: 24rpx;
          color: #A9A7B1;
        }
      }
    }

    .is-end{
			text-align: center;
			margin: 15rpx;
			color: #8a8a8a;
		}
  }
  
</style>